import animatedValue from '../../../examples/files/animation/animatedValue.tsx'
import animatedView from '../../../examples/files/animation/animatedView.tsx'
import animatedExample from '../../../examples/files/animation/animatedExample.tsx'
import animatedInterpolate from '../../../examples/files/animation/animatedInterpolate.tsx'

The `Animated` API lets us animate component styles.

There are 4 fundamental parts to this API:

- `Animated.Value` - wrap a number value that we want to use in a style
- `Animated.View`, `Animated.Text`, ... - use a component that supports animated styles
- `Animated.timing`, `Animated.spring`, ... - choose an animation type
- `.start()` - start the animation

<Details>Let's walk through setting up an animation.</Details>

---

## 1. Create an `Animated.Value`

To wrap a number value, call `new Animated.Value(value)`.

<Example code={animatedValue} panes={['editor']} />

---

## 2. Choose an `Animated` component

`Animated` provides specially wrapped versions of the standard `View`, `Text`, and `Image` components. These wrapped components can have Animated.Values in their style prop. To animate something other than one of these three, we can wrap any component, e.g. `const AnimatedButton = Animated.createAnimatedComponent(Button)`.

Then, we can use the `Animated.Value` we created earlier in a style.

> This won't animated, since we haven't specified a style we want to animate yet.

<Example code={animatedView} />

---

## 3. Animate!

Pick an animation function, e.g. `Animated.timing` and then call `.start()` imperatively. <Details>Now we can should see an animation when we click the button.</Details>

We'll typically use the `useNativeDriver` option when possible - this improves animation performance, but we can only use it when animating styles that don't affect layout (e.g. `color`, `opacity`, and `transform` but not `width` or `flex`)

> Don't forget `.start()`!

<Example code={animatedExample} />

---

## Interpolate

To animate styles in more complex ways, we can use a single animated value, but interpolate its value into different ranges for different styles.

<Example code={animatedInterpolate} />

---

## Other animations

There are other types of animations we can run besides `timing`: `delay` and `spring`. We can also choose the easing curve to use with a timing animation.

We can also perform other operations on animated values besides `interpolate`.

The [documentation](https://reactnative.dev/docs/animated) covers all of the available options in more detail.
